<template>
    <div class="main-container">
        <el-row>
            <el-col :span="6">
                <div class="agent-card agent-card-create" @click="addAgentEvent">
                    <i style="font-size: 30px" class="el-icon-circle-plus-outline"></i>
                    <strong>新建 Agent</strong>
                </div>
            </el-col>
            <el-col :span="6" v-for="item of card.agents">
                <div class="agent-card" @click="agentArrangeEvent(item)">
                    <div class="agent-card-header">
                        <div class="agent-card-title">
                            <strong>{{ item.name }}</strong>
                        </div>
                        <div @click.stop.prevent="1 == 1">
                            <el-dropdown @command="cardOperationHandle">
                                <div class="agent-card-operation">
                                    <svg-icon icon-class="operation" />
                                </div>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item
                                            icon="el-icon-edit"
                                            :command="{action: 'edit', agent: item}">
                                        编辑</el-dropdown-item>
                                    <el-dropdown-item
                                            icon="el-icon-remove-outline"
                                            :command="{action: 'delete', agent: item}"
                                            divided>
                                        删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        </div>
                    <div class="agent-card-time">
                        编辑于 {{ item.updateTime }}
                    </div>
                    <div class="agent-card-desc">
                        {{ item.desc }}
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-dialog :title="dialog.title"
                   :close-on-click-modal="false"
                   :visible.sync="dialog.visible">
            <el-form :model="dialog.formData"
                     :rules="dialog.rules"
                     label-position="left"
                     :ref="dialog.formRef"
                     label-width="100px">
                <el-form-item label="名称" prop="name" >
                    <el-input v-model="dialog.formData.name" autocomplete="off" :disabled="this.dialog.type == 2"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input v-model="dialog.formData.desc" type="textarea" rows="4" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="submitAgentForm()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import tools from "@/util/Tools";

    export default {
        name: "agent",
        data() {
            return {
                card: {
                    agents: []
                },
                dialog: {
                    title: "",
                    visible: false,
                    type: 0,    // 1 表示添加, 2 表示编辑
                    formRef: "agentDataForm",
                    formData: {
                        id: "",
                        name: "",
                        desc: ""
                    },
                    rules: {
                        name: [
                            {required: true, message: "请输入名称", trigger: "blur"},
                        ],
                        desc: [
                            {required: true, message: "请输入描述", trigger: "blur"},
                        ],
                    }
                }
            }
        },
        methods: {
            findAgents() {
                tools.get("/agent/findAll").then(response => {
                    this.card.agents = response.dataList;
                })
            },

            addAgentEvent() {
                this.dialog.title = "添加Agent";
                this.dialog.visible = true;
                this.dialog.type = 1;
                this.dialog.formData = {};
            },

            editAgentEvent(agent) {
                this.dialog.title = "编辑Agent";
                this.dialog.visible = true;
                this.dialog.type = 2;
                this.dialog.formData = tools.copy(agent);
            },

            deleteAgentEvent(agent) {
                this.$confirm("是否删除Agent (" + agent.name + ")", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    tools.delete("/agent/delete", {id: agent.id}).then(response => {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        });
                        this.findAgents();
                    })
                }).catch(() => {
                });
            },

            cardOperationHandle(command) {
                if ("edit" == command.action) {
                    this.editAgentEvent(command.agent);
                } else if ("delete" == command.action) {
                    this.deleteAgentEvent(command.agent);
                }
            },

            submitAgentForm() {
                this.$refs[this.dialog.formRef].validate((valid) => {
                    if (valid) {
                        let url;
                        let message;
                        if (this.dialog.type == 1) {
                            url = "/agent/add";
                            message = "添加成功";
                        } else if (this.dialog.type == 2) {
                            url = "/agent/edit";
                            message = "编辑成功";
                        }
                        tools.post(url, this.dialog.formData).then(response => {
                            this.$message({
                                type: "success",
                                message: message
                            });
                            this.dialog.visible = false;
                            this.findAgents();
                        });
                    } else {
                        return false;
                    }
                });
            },

            agentArrangeEvent(agent) {
                //window.open("#/agent/arrange?agentId=" + agent.id);
                let route = this.$router.resolve(
                    {
                        path: "/agent/arrange",
                        query: {
                            agentId: agent.id
                        }
                    }
                );
                window.open(route.href, "_blank");
            },
        },
        mounted() {
            this.findAgents();
        }
    }
</script>

<style scoped>
    ::v-deep .el-col-6 {
        padding: 8px;
    }
    .agent-card {
        height: 160px;
        background: white;
        border-radius: 4px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        box-sizing: border-box;
        padding: 10px 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .agent-card-create {
        justify-content: center;
        align-items: center;
        color: #409EFF;
    }
    .agent-card-header {
        display: flex;
        justify-content: space-between;
        height: 24px;
        align-items: center;
    }
    .agent-card-title {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .agent-card-operation {
        color: black;
        font-size: 18px;
        font-weight: bold;
    }
    .agent-card-operation:hover {
        color: #409EFF;
    }
    .agent-card-time {
        font-size: 12px;
        color: #676f83;
    }
    .agent-card-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        font-size: 14px;
        color: #42546f;
    }
</style>
